<!--
 * @Description: 
 * @Date: 2023-02-23 18:05:46
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 11:45:49
-->
<template>
	<div>
		<div class="lvyou">
			<div class="header">
				<div class="content-box">
					<div class="title">联合国世界旅游组织“最佳旅游乡村”——荆竹村</div>
					<!-- <i></i> -->
					<div class="desc">
						<span
							>世界“最佳旅游乡村”评选倡议由联合国世界旅游组织发起，始于2021年，旨在通过旅游促进乡村文化遗产保护和可持续发展。2021年12月2日，联合国世界旅游组织第24届大会公布了首批世界“最佳旅游乡村”名单，来自32个国家的44个村庄脱颖而出，入选世界“最佳旅游乡村”名单。中国浙江省安吉县的余村和安徽省黟县的西递村入选。</span
						>
						<span
							>2022年12月20日，第二批世界“最佳旅游乡村”名单公布，57个国家136个候选乡村中的32个村庄入选，中国广西大寨村和重庆武隆荆竹村在列。截至目前中国已有4个乡村入选世界“最佳旅游乡村”，数量位居亚太第一。</span
						>
					</div>
				</div>
				<div class="video-box">
					<div class="list">
						<div class="list-item">
							<div class="video-box" @click="playVideo(list)">
								<el-image :src="list.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
								<IEpVideoPlay color="#fff" />
							</div>
						</div>
					</div>
				</div>
				<PreviewVideo ref="PVVideoRef" :video="preVideo" />
			</div>

			<!-- 视频报道 -->
			<div class="video-report-box">
				<div class="title">视频报道</div>
				<div class="recommend-item-box">
					<div class="video-box">
						<div class="list">
							<div class="list-item" v-for="(item, index) in videoList" :key="index">
								<div class="video-box" @click="playVideo(item)">
									<el-image :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
									<IEpVideoPlay v-if="item.video !== ''" color="#fff" />
								</div>
								<div class="text">{{ item.content }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 相关新闻 -->
			<div class="video-report-box">
				<div class="title">相关新闻</div>

				<div class="news-box">
					<div class="news-item" v-for="i in news" :key="i.id">
						<a class="news-title ty-line-1" :href="i.url">{{ i.title }}</a>
						<p class="news-date">{{ i.date }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="LvYou">
import { useBaseStore } from "@/store/base";
import { PVideo } from "@/components/interface";
import PreviewVideo from "@/components/PreviewVideo/index.vue";
const { cosPrefix } = useBaseStore();
// 新闻
const news = [
	{
		id: 1,
		title: "保护自然风貌、发展生态旅游，重庆市武隆区荆竹村—生态底色添...",
		date: "2022/12/26",
		url: "http://paper.people.com.cn/rmrb/html/2022-12/26/nw.D110000renmrb_20221226_1-14.htm"
	},
	{
		id: 2,
		title: "武隆区仙女山街道荆竹村成功入选2022年联合国世界旅游组织“最佳旅...",
		date: "2022/12/26",
		url: "https://www.jrcq.cn/Release/txtlist_i19265v.html"
	},
	{ id: 3, title: "武隆仙女山荆竹村跻身世界最佳旅游乡村", date: "2022/12/21", url: "https://m.cqrb.cn/cqrb/2022-12/21/007/content_rb_228195.htm" },
	{
		id: 4,
		title: "广西大寨村和重庆荆竹村入选联合国世界旅游组织“最佳旅游乡村”",
		date: "2022/12/21",
		url: "https://h.xinhuaxmt.com/vh512/share/11276368?d=1348d24&channel=weixin"
	},
	{
		id: 5,
		title: "广西大寨村和重庆荆竹村入选联合国“最佳旅游乡村”",
		date: "2022/12/20",
		url: "https://wap.peopleapp.com/article/6956468/6816055"
	},
	{
		id: 6,
		title: "中国广西大寨村和重庆荆竹村入选联合国世界旅游组织“最佳旅游乡村”",
		date: "2022/12/20",
		url: "https://www.mct.gov.cn/whzx/whyw/202212/t20221220_938183.htm"
	},
	{
		id: 7,
		title: "荆竹村入选联合国世界旅游组织“最佳旅游乡村”",
		date: "2022/12/20",
		url: "http://www.cq.xinhuanet.com/2022-12/21/c_1129222545.htm"
	},
	{
		id: 8,
		title: "喜讯！重庆荆竹村入选联合国世界旅游组织“最佳旅游乡村”",
		date: "2022/12/20",
		url: "https://mp.weixin.qq.com/s/pNRbWvc8XFqBY1z4uPZB0g"
	}
];
// 概况视频
const list = {
	label: "概况",
	video: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/1.mp4",
	content: "沙特·联合国世界旅游组织“最佳旅游乡...",
	img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/1.png"
};
// 视频报道
const videoList = [
	{
		id: 1,
		content: "朱丽亚去荆竹",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/8.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/zla-jz.mp4"
	},
	{
		id: 2,
		content: "22022年12月20日 我国两村入选联合国...",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/2.png",
		video: cosPrefix + "/three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/2.mp4"
	},
	{
		id: 3,
		content: "广西大寨村和重庆荆竹村入选联合国世界旅游组织“最佳旅游乡村",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/3.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/3.mp4"
	},
	{
		id: 4,
		content: "喜讯！重庆荆竹村入选联合国世界旅游...",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/4.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/4.mp4"
	},
	{
		id: 5,
		content: "2022年12月21日仙女山街道荆竹村入选联合国世界旅游组织“最佳旅游乡村”",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/5.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/5.mp4"
	},
	{
		id: 6,
		content: "2022年12月15日荆竹村入选《2022世界旅游联盟——旅游助力乡村振兴案例》",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/6.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/6.mp4"
	},
	{
		id: 7,
		content: "2022年3月8日仙女山归原小镇入选2022年度重庆市特色小镇",
		img: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/7.png",
		video: cosPrefix + "three-level/xiangye/xiangyefeng/zuijialvyou/shipinbaodao/7.mp4"
	}
] as any[];

// 播放视频
const preVideo = ref<PVideo>({ title: "", src: "" });
const PVVideoRef = ref<InstanceType<typeof PreviewVideo>>();
const playVideo = (item: any) => {
	preVideo.value = { title: item.title, src: item.video };
	PVVideoRef.value.play();
};
</script>
<style lang="scss" scoped>
.lvyou {
	padding: 40px 320px;
	.header {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 400px;
		background-color: #f9f9f9;
		.content-box {
			display: flex;
			flex-direction: column;
			padding: 40px;
			.title {
				font-size: 24px;
				font-weight: 700;
				color: $theme-color;
			}
			i {
				width: 160px;
				height: 4px;
				margin: 15px 0;
				background-color: $theme-color;
			}
			.desc {
				font-size: 18px;
				line-height: 36px;
				span {
					display: inline-block;
					text-indent: 32px;
				}
			}
		}
		.video-box {
			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.list-item {
					display: flex;
					margin-bottom: 40px;
					.el-image {
						width: 640px;
						height: 400px;
					}
					.text {
						padding: 20px;
						font-size: 16px;
					}
				}
			}
		}
	}
	.video-report-box {
		margin: 40px 0;
		.title {
			width: 120px;
			padding: 7px 12px;
			margin-bottom: 40px;
			font-size: 24px;
			color: #ffffff;
			background-color: #8a1313;
		}
		.news-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.news-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 620px;
				a,
				p {
					font-size: 16px;
					&.news-date {
						color: #bcbcbc;
					}
				}
			}
		}
		.recommend-item-box {
			display: flex;
			flex-flow: row nowrap;
			width: 100%;
			padding-bottom: 10px;
			overflow: hidden;
			overflow-x: scroll;
			&::-webkit-scrollbar {
				/* 滚动条整体样式 */
				height: 6px;
				cursor: pointer;
			}
			&::-webkit-scrollbar-thumb {
				cursor: pointer;
				background-color: rgba($color: #252525, $alpha: 10%);

				/* 滚动条里面小方块 */
				border-radius: 10px;
			}
			&::-webkit-scrollbar-track {
				cursor: pointer;

				/* 滚动条里面轨道 */
				background: transparent;
				border-radius: 10px;
			}
			.video-box {
				.list {
					display: flex;
					.list-item {
						display: flex;
						flex-direction: column;
						margin-right: 20px;
						margin-bottom: 10px;
						.el-image {
							width: 305px;
							height: 229px;
						}
						.text {
							width: 305px;
							overflow: hidden;
							font-size: 16px;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.lvyou {
		padding: 16px;
		.header {
			flex-direction: column;
			height: auto;
			padding: 16px;
			.content-box {
				padding: 0;
				.title {
					font-size: 18px;
				}
				.desc {
					font-size: 14px;
				}
			}
			.video-box {
				.list {
					.list-item {
						margin-top: 12px;
						margin-bottom: 0;
					}
					.el-image {
						width: 100% !important;
						height: auto !important;
						object-fit: cover;
					}
				}
			}
		}
		.video-report-box {
			margin: 16px 0;
			.title {
				width: 100px;
				padding: 4px 8px;
				margin-bottom: 16px;
				font-size: 16px;
				text-align: center;
			}
			.recommend-item-box {
				.list-item {
					margin-right: 12px;
					margin-bottom: 0;
				}
				.el-image {
					width: 260px !important;
					height: auto !important;
				}
				.text {
					width: 260px !important;
				}
			}
			.news-item {
				width: 100% !important;
			}
		}
	}
}
</style>
